<template>
	<view class="">
		<view class="has_discount">

			<view v-for="(item,index) in discountList">
				<view class="discount_one">
					<view class="top">
						<view class="top_left">
							￥<text> {{item.price}}</text>.00
						</view>
						<view class="top_right">
							<view class="top_right_1">{{item.title}}</view>
							<text class="top_right_2">{{item.full_decrement}}</text>
							<view class="btn">去使用</view>
						</view>

					</view>
					<view class="bottom" @tap="chooseInfo(index)">有效期 {{item.time}}</view>
				</view>
				<view class="info" :class="{info_active:currentindex == index}">
					{{item.info}}
				</view>
			</view>


		</view>
		<view class="nodiscount" v-if="discountlist.length <= 0">
			<image :src="Url+'mine/discount/no_discount.png'" mode=""></image>
			<view class="nodiscount_detail" @tap="tocenter">
				您当前还没有优惠券！<text>去领券中心</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['discountlist'],
		data() {
			return {
				Url:this.Imgurl,
				currentindex: -1,
				bg_src: this.Imgurl + 'add_images/nouse_diasount_bg.png',
				discountList: [{
						price: 15,
						title: '景烨新人券',
						full_decrement: '满80减20',
						time: '2020.06.18-2020.06.21',
						info: "1.说明"
					},
					{
						price: 15,
						title: '景烨新人券',
						full_decrement: '满80减20',
						time: '2020.06.18-2020.06.21',
						info: "1.说明"
					},
					{
						price: 15,
						title: '景烨新人券',
						full_decrement: '满80减20',
						time: '2020.06.18-2020.06.21',
						info: "1.说明2.第二条"
					}
				]
			}

		},
		methods: {
			tocenter() {
				uni.navigateTo({
					url: '/pageD/discount/center'
				})
			},
			chooseInfo(val) {
				if (this.currentindex == val) {
					this.currentindex = -1
				} else {
					this.currentindex = val
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.has_discount {
		margin-top: 30upx;
		padding: 30upx 0 70upx;
		background-color: #fff;
	}

	.discount_one {
		width: calc(100% - 60upx);
		height: 206upx;
		margin: 40upx auto;
		margin-bottom: 0;
		margin-top: 20upx;
		position: relative;
		background: url(../../static/image/index/nouse_diasount_bg.png) no-repeat;
		background-size: 100% 100%;

		.top {
			width: 100%;
			padding: 30upx;
			height: 136upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.top_left {
				flex: 1;
				font-size: 28upx;
				color: red;
				font-weight: bold;
				padding: 14upx 0;
				border-right: 2upx solid #dadada;

				text {
					font-size: 40upx;
				}

			}

			.top_right {
				position: relative;
				flex: 3;
				padding: 18upx;
				padding-left: 30upx;
				font-size: 32upx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.top_right_2 {
					margin-top: 12upx;
					width: 125upx;
					height: 34upx;
					line-height: 34upx;
					font-size: 26upx;
					color: #FD7377;
					display: inline-block;
					border: 1px solid #FD7377;
					text-align: center;
				}

				.btn {
					position: absolute;
					bottom: 50%;
					right: 15upx;
					width: 145upx;
					height: 51upx;
					text-align: center;
					line-height: 51upx;
					border-radius: 24upx;
					font-size: 28upx;
					color: #fff;
					transform: translate(0, 50%);
					background: linear-gradient(to right, #fe7b71 0%, #f73e2f 100%);
				}
			}
		}

		.bottom {
			height: 70upx;
			padding-left: 30upx;
			font-size: 26upx;
			line-height: 72upx;
			color: #666;
		}
	}

	.info {
		width: calc(100% - 60upx);
		margin: auto;
		padding: 0 12upx 20upx;
		background: #ccc;
		font-size: 26upx;
		box-sizing: border-box;
		display: none;
	}

	.info_active {
		display: block;
	}

	.list {
		width: calc(100% - 60upx);
		height: 186upx;
		margin: auto;
		margin-top: 20upx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.list_content {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;

			.price {
				width: 210upx;
				height: 140upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.price_p {
					font-size: 28upx;
					color: #FFFFFF;

					text {
						font-size: 40upx;
						font-weight: bold;
					}
				}

				.price_rule {
					margin-top: 10upx;
					font-size: 24upx;
					color: #FFFFFF;
					white-space: nowrap;
				}
			}

			.info {
				width: 340upx;
				height: 100%;
				padding: 20upx 0;
				padding-left: 25upx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.info_title {
					font-size: 28upx;
					color: #000;
					line-height: 28upx;
				}

				.info_detail {
					font-size: 24upx;
					color: #333333;
					line-height: 24upx;
				}

				.info_date {
					margin-top: 20upx;
					font-size: 24upx;
					color: #333333;
					line-height: 24upx;
				}
			}

			.touse {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				height: 100%;
				margin-right: 15upx;

				.btn {
					position: relative;
					width: 144upx;
					height: 52upx;
					border-radius: 26upx;
					background: linear-gradient(to right, #fe7b71 0%, #f73e2f 100%);
					font-size: 24upx;
					color: #ffffff;
					text-align: center;
					line-height: 52upx;

					.over_time {
						position: absolute;
						right: 0;
						top: -60upx;
						font-size: 24upx;
						color: #f73e2f;
					}
				}
			}

			.getdiscount {
				width: 120upx;
				background: linear-gradient(to right, #fe7b71 0%, #f73e2f 100%);
				height: 40upx;
				border-radius: 20upx;
				text-align: center;
				line-height: 40upx;
				color: #FFFFFF;
				font-size: 24upx;
			}
		}
	}

	.no_more_discount {
		margin-top: 30upx;
		font-size: 28upx;
		color: #999999;
		text-align: center;
	}

	.nodiscount {
		text-align: center;
		margin-top: 300upx;

		image {
			display: block;
			margin: auto;
			width: 240upx;
			height: 200upx;
		}

		.nodiscount_detail {
			margin-top: 50upx;
			font-size: 24upx;
			color: #999999;

			text {
				color: #f73e2f;
				text-decoration: underline;
			}
		}
	}
</style>
